<template>
	<view class="report-wrap" v-if="code==200">
		<view class="report-item">
			<!-- 标题 -->
			<view class="item-title">
				<view class="item-title-fid">{{title}}</view>
				<view class="item-title-zid">{{section_name}}</view>
				<view class="item-title-fhtime">完成时间：{{practice_obj.close_time}}</view>
			</view>
			<!-- 正确率 -->
			<view class="item-acccury">
				<v-icircle :percent="practice_obj.rate" :size="250" BgId="BgId" InId="InId" trailColor="#AFEFE0" strokeColor="#00D5A2">
					<view class="cir_progress_title">
						<view style="text-align: center;"><text class="cir_progress_unit">{{practice_obj.rate}}%</text></view>
						<view class="cir_progress_type">正确率</view>
					</view>
					<view slot="canvas">
						<canvas class="CanvasBox strokeCanvas" canvas-id="BgId"></canvas>
						<canvas class="CanvasBox trailCanvas" canvas-id="InId"></canvas>
					</view>
				</v-icircle>
			</view>
		</view>
		
		<!-- 题数 -->
		<view class="report-topicnums">
			<view class="report-topicnums-item">
				<view class="item-title">
					<view class="item-title-topic">总题数</view>
					<view class="item-title-num"><text class="sum">{{practice_obj.question_num}}</text>题</view>
				</view>
				<view class="item-title">
					<view class="item-title-topic">对的题数</view>
					<view class="item-title-num"><text class="sum2">{{practice_obj.correct_num }}</text>题</view>
				</view>
				<view class="item-title">
					<view class="item-title-topic">错的题数</view>
					<view class="item-title-num"><text class="sum3">{{practice_obj.error_num}}</text>题</view>
				</view>
			</view>
		</view>
		
		<!-- 错题错因 -->
		<view class="report-erreason">
			<view class="report-erreason-title">错题错因</view>
			<view class="report-erreason-item" v-for="(item,index) in practice_obj.practice_error_log" :key='index'>
				<view class="item-content"><view>{{item.error_name}} </view><view>{{item.error_num}}题</view></view>
				<rich-text class="item-suggureat" :nodes="item.project"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/util.js'
	import icircle from '@/components/xiaoran-circle/xiaoran-circle'
	export default {
		components: {
			vIcircle: icircle
		},
		data() {
			return {
				practice_id: 0, // 记录ID
				practice_obj: {}, // 报告列表
				
				// 章节名称/单元
				title: '',
				section_name: '',
				code:400
			}
		},
		onLoad (obj) {
			// 获取章节名称/单元，从缓存中获取
			let question_obj = uni.getStorageSync('question_obj')
			this.title = question_obj.fid_section_name
			this.section_name = question_obj.section_name
			// 获取传递过来的记录ID
			this.practice_id = Number(question_obj.practice_id)
			
			// 开始请求[错因报告]
			this.$zapi.apiPost('/user/Practice.User/PracticePresentation', {
				practice_id: this.practice_id,
				student_id: uni.getStorageSync('currentChild').student_id
			}).then(res => {
				this.code=res.data.code;
				if(res.data.code==200){
				// 解析标签
				utils.latex_reques(res.data.data.practice_error_log, 'project')
				this.practice_obj = res.data.data
				// 格式化时间戳
				this.practice_obj.close_time = utils.getFormatTime(this.practice_obj.close_time)
				// 格式化正确率
				this.practice_obj.rate = parseInt(this.practice_obj.rate)
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none'
					});
					setTimeout(function(){
						uni.navigateBack({
							delta:1
						});
					},2000);
				}
			})
		}
	}
</script>

<style lang="scss">
page {
	background: #FAFAFA;
}
.report-item, .report-topicnums,.report-erreason{
	background: #FFFFFF;
	margin-bottom: 20upx;
	overflow-x: hidden;
}
// 正确率/标题
.report-item{
	display: flex;
	justify-content: space-around;
	align-content: center;
	padding: 0 20upx;
	.item-title{
		display: flex;
		flex-direction: column;
		justify-content: center;
		// 标题 / 完成时间
		.item-title-fid {
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
		}
		.item-title-zid {
			font-size: 32upx;
			font-weight: 400;
			color: #333333;
		}
		.item-title-fhtime {
			margin-top: 20upx;
			font-size: 28upx;
			color: #999999;
		}
	}
}
	
// 圆圈正确率样式
.cir_progress_title {
	height: auto;
}
.cir_progress_score,
.cir_progress_unit {
	font-size: 36upx;
	color: #00D5A2;
	line-height: 1;
}
.cir_progress_type {
	text-align: center;
	color: #999999;
	font-size: 20upx;
}
.CanvasBox {
	width: 226px;
	height: 226px;
	position: absolute;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}


// 题数
.report-topicnums{
	.report-topicnums-item {
		display: flex;
		justify-content: space-around;
		padding: 20upx 10upx;
		.item-title{
			text-align: center;
			flex: 0.333333333;
			border-right: 1px solid #E5E5E5;
			.item-title-topic,.item-title-num {
				color: #999999;
			}
			.sum{
				color: #333333;
				font-size: 72upx;
			}
			.sum2 {
				font-size: 72upx;
				color: #00D5A2;
			}
			.sum3 {
				font-size: 72upx;
				color: #FF4E78;
			}
		}
	}
}

.item-title:last-child {
	border-right: none !important;
}
// 错题错因
.report-erreason{
	padding: 20upx;
	// 标题
	.report-erreason-title {
		font-size: 	34upx;
		margin-bottom: 20upx;
	}
	.report-erreason-title:before {
		display: inline-block;
		padding-right: 20upx;
		content: '|';
		font-size: 34upx;
		color: #00D5A2;
	}
	// 内容 / 建议
	.report-erreason-item{
		display: flex;
		flex-direction: column;
		.item-content,
		.item-suggureat {
			padding-bottom: 50upx;
			padding-top: 20upx;
		}
		.item-content {
			display: flex;
			padding: 6upx 20upx;
			justify-content: space-between;
			font-size: 30upx;
			color: #FFFFFF;
			border-radius: 16upx;
			background-image: linear-gradient(#00D5A2, #26C99D);
		}
		.item-suggureat {
			font-size: 28upx;
			color: #333333;
		}
	}
}
</style>
